<script setup lang="ts">
import { useCluster } from "./table";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddForm from "./addForm.vue";

import More from "@iconify-icons/ep/more-filled";
import AddFill from "@iconify-icons/ri/add-circle-line";

const clickAddBut = () => {
  dialogFormAddRef.value.showdialogForAdd();
};
const {
  dialogFormAddRef,
  loading,
  columns,
  dataList,
  buttonClass,
  onSearch,
  handleDelete,
  handleAppIssue
} = useCluster();
</script>

<template>
  <div>
    <AddForm ref="dialogFormAddRef" @onSearchEnv="onSearch" />
    <div class="main">
      <div class="float-right w-[99%]">
        <PureTableBar title="集群管理" @refresh="onSearch">
          <template #buttons>
            <el-button
              type="primary"
              :icon="useRenderIcon(AddFill)"
              @click="clickAddBut"
            >
              添加集群
            </el-button>
          </template>
          <template v-slot="{ size, checkList }">
            <pure-table
              border
              align-whole="center"
              table-layout="auto"
              :loading="loading"
              :size="size"
              :data="dataList"
              :columns="columns"
              :checkList="checkList"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }"
            >
              <template #operation="{ row }">
                <el-button
                  @click="handleDelete(row)"
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon(More)"
                >
                  删除
                </el-button>
                <el-dropdown>
                  <el-button
                    class="ml-3 mt-[2px]"
                    link
                    type="primary"
                    :size="size"
                    :icon="useRenderIcon(More)"
                  />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>
                        <el-button
                          @click="handleAppIssue(row)"
                          :class="buttonClass"
                          link
                          type="primary"
                          :size="size"
                          :icon="useRenderIcon(More)"
                        >
                          发布应用
                        </el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button
                          disabled
                          :class="buttonClass"
                          link
                          type="primary"
                          :size="size"
                          :icon="useRenderIcon(More)"
                        >
                          重启服务器
                        </el-button>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
